<!--
 * @Author: linjituan linjituan@revolution.com
 * @Date: 2024-09-22 00:36:35
 * @LastEditors: linjituan linjituan@revolution.com
 * @LastEditTime: 2024-11-13 17:44:54
 * @FilePath: \hm-twx-admin\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import "dayjs/locale/zh-cn";

import { App, ConfigProvider } from "ant-design-vue";
import { storeToRefs } from "pinia";

import { AppProvider } from "@/components/Application";
// import { basicTarbar } from "@/components/Tarbar/index";
import { topNavbar } from "@/components/TopNavbar/index";
import { useTitle } from "@/hooks/web/useTitle";
import { useLocale } from "@/locales/useLocale";
import { useAppStore } from "@/store/modules/app";
import { computed, ref } from "vue";

// support Multi-language
const { getAntdLocale } = useLocale();
const appStore = useAppStore();
const { themeConfig } = storeToRefs(appStore);

const componentSize = computed(() => appStore.getComponentSize);
// Listening to page changes and dynamically changing site titles
useTitle();

const isMobileFlag = ref(false);

function isMobile() {
  // 定义一个媒体查询，这里假设屏幕宽度小于768px为移动端
  const mediaQuery = window.matchMedia("(max-width: 767px)");
  mediaQuery.addEventListener("change", function (event) {
    if (event.matches) {
      console.log("设备切换到移动端 change");
      // 执行切换到移动端的代码
      appStore.setIsMobile(true);
      isMobileFlag.value = true;
    } else {
      console.log("设备切换到PC或其他大屏设备 change");
      // 执行切换到PC的代码
      appStore.setIsMobile(false);
      isMobileFlag.value = false;
    }
  });
  // 返回媒体查询的匹配结果
  return mediaQuery.matches;
}

if (isMobile()) {
  console.log("当前设备是移动端 isMobile");
  // 执行针对移动端的代码
  appStore.setIsMobile(true);
  isMobileFlag.value = true;
} else {
  console.log("当前设备是PC或其他大屏设备 isMobile");
  // 执行针对PC的代码
  appStore.setIsMobile(false);
  isMobileFlag.value = false;
}

window.addEventListener("resize", function () {
  // 在窗口大小变化时重新判断是否为移动端
  if (isMobile()) {
    console.log("设备切换到移动端 resize");
    // 在这里可以执行一些切换到移动端的操作
    appStore.setIsMobile(true);
    isMobileFlag.value = true;
  } else {
    console.log("设备切换到PC或其他大屏设备 resize");
    // 在这里可以执行一些切换到PC的操作
    appStore.setIsMobile(false);
    isMobileFlag.value = false;
  }
});

// const tarbarList = ref([
//   {
//     name: "Home",
//     icon: "icon-shouye",
//     path: "/home",
//   },
//   {
//     name: "Posts",
//     icon: "icon-pingjia",
//     path: "/posts",
//   },
// ]);
</script>

<template>
  <ConfigProvider
    :locale="getAntdLocale"
    :theme="themeConfig"
    :component-size="componentSize"
  >
    <App class="h-full w-full">
      <AppProvider>
        <topNavbar></topNavbar>
        <div class="app-content">
          <!-- <div class="content-left">
          </div> -->
          <div class="content-right">
            <RouterView />
          </div>
        </div>
        <!-- <basicTarbar v-if="isMobileFlag" :list="tarbarList"></basicTarbar> -->
      </AppProvider>
    </App>
  </ConfigProvider>
</template>

<style lang="less" scoped>
.app-content {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: #f1f1f1;

  .content-left {
    flex: 1;
  }

  .content-right {
    flex: 2.5;
  }
}
</style>